<template>
    <div>
        <!-- <view class="top flex align-center">
            <image
                class="closeIcon"
                @click="close"
                src="/static/static/technician/joinUs/add.png"
                mode="scaleToFill"
            />
            <view class="top-title">技师招募</view>
        </view> -->
        <navigationBar
            :fixed="true"
            :bgType="3"
            :backType="2"
            navigationTitle="技师招募"
        />
        <view class="box">
            <img class="topBg" src="/static/static/technician/joinUs/top_bg.png" />
            <view class="content">
                <view class="card">
                    <view class="title">
                        <img
                            class="img"
                            src="/static/static/technician/joinUs/box.png"
                            mode="scaleToFill"
                        />
                        <image
                            class="textImg"
                            src="/static/static/technician/joinUs/joinUsText.png"
                            mode="widthFix"
                        />
                    </view>
                    <view class="forms f-32">
                        <view class="forms-item flex just-between align-center">
                            <view class="label">姓名：</view>
                            <input
                                type="text"
                                v-model="form.name"
                                placeholder="输入您的姓名"
                            />
                        </view>
                        <view class="forms-item flex just-between align-center">
                            <view class="label">性别：</view>
                            <view
                                class="flex align-center just-between radio-group"
                            >
                                <view
                                    class="radio-item flex align-center just-center"
                                    @click="onRadio(1)"
                                >
                                    <image
                                        v-if="radioIndex === 1"
                                        class="radio-img"
                                        src="/static/static/technician/joinUs/radioSuccess.png"
                                        mode="scaleToFill"
                                    />
                                    <image
                                        v-else
                                        class="radio-img"
                                        src="/static/static/technician/joinUs/radio.png"
                                        mode="scaleToFill"
                                    />
                                    <text>男</text>
                                </view>
                                <view
                                    class="radio-item flex align-center just-center"
                                    @click="onRadio(0)"
                                >
                                    <image
                                        v-if="radioIndex === 0"
                                        class="radio-img"
                                        src="/static/static/technician/joinUs/radioSuccess.png"
                                        mode="scaleToFill"
                                    />
                                    <image
                                        v-else
                                        class="radio-img"
                                        src="/static/static/technician/joinUs/radio.png"
                                        mode="scaleToFill"
                                    />
                                    <text>女</text>
                                </view>
                            </view>
                        </view>
                        <view class="forms-item flex just-between align-center">
                            <view class="label">手机号：</view>
                            <input
                                type="text"
                                v-model="form.mobile"
                                placeholder="输入您的手机号"
                            />
                        </view>
                        <view class="forms-item flex just-between align-center">
                            <view class="label">生日：</view>
                            <picker
                                mode="date"
                                :value="date"
                                :end="maxDate"
                                @change="bindDateChange"
                            >
                                <view
                                    class="uni-input"
                                    :class="{ placeholder: !date }"
                                    >{{ date || "请选择" }}</view
                                >
                            </picker>
                        </view>
                        <view class="forms-item flex just-between align-center">
                            <view class="label">意向合作城市：</view>
                            <view
                                class="flex align-center"
                                :class="{ placeholder: !index }"
                            >
                                <picker
                                    @change="bindPickerChange"
                                    :value="index"
                                    :range="array.map((item) => item.name)"
                                >
                                    <view class="uni-input">
                                        {{ index || "请选择" }}
                                    </view>
                                </picker>
                                <image
                                    class="rIcon"
                                    src="/static/static/technician/joinUs/right.png"
                                    mode="scaleToFill"
                                />
                            </view>
                        </view>
                    </view>
                </view>
                <view class="card uploadBox">
                    <view class="upImg flex just-between">
                        <view class="upImg-left">
                            <view class="upImg-left-title">工作形象照</view>
                            <view class="upImg-left-tip">图片不能超过2M</view>
                        </view>
                        <view class="upImg-right" @click="upload">
                            <view
                                v-if="!form.work_image"
                                class="upImg-right-box flex column f-26 align-center just-center"
                            >
                                <image
                                    class="addIcon"
                                    src="/static/static/technician/joinUs/add.png"
                                    mode="scaleToFill"
                                />
                                点击上传
                            </view>
                            <image
                                class="upImg-right-img"
                                v-else
                                :src="$imageURL+form.work_image"
                                mode="scaleToFill"
                            />
                        </view>
                    </view>
                </view>
            </view>
            <view class="btn" @click="submit">
                <img src="/static/static/technician/joinUs/submit.png" />
            </view>
        </view>
    </div>
</template>
<script>
import { getCity } from "@/API/API/common.js";
import { applyTechnician } from "@/API/API/recruit.js";
export default {
    name: "ChonggouJoinUs",

    data() {
        return {
            radioIndex: 1,
            form: {
                name: "",
                mobile: "",
                birthday: "",
                area_id: "",
                work_image: "",
                gender: 1,
            },
            date: "",
            index: 0,
            array: [],
            maxDate: "",
        };
    },

    onLoad(options) {
        if (!uni.getStorageSync("dealer_id") && options.dealer_id) {
            uni.setStorageSync("dealer_id", options.dealer_id);
        }
        this.getCityData();
        if (!uni.getStorageSync("___token___")) {
            uni.navigateTo({
                url: "/pages/login/login",
            });
        }
        const maxDate = new Date();
        this.maxDate =
            maxDate.getFullYear() +
            "-" +
            (maxDate.getMonth() + 1 < 10
                ? "0" + (maxDate.getMonth() + 1)
                : maxDate.getMonth() + 1) +
            "-" +
            (maxDate.getDate() < 10
                ? "0" + maxDate.getDate()
                : maxDate.getDate());
    },

    methods: {
        // 单选性别
        onRadio(index) {
            this.radioIndex = index;
            this.form.gender = index;
        },
        // 上传
        upload() {
            uni.chooseImage({
                count: 1,
                sizeType: ["original", "compressed"],
                sourceType: ["album", "camera"],
                success: (res) => {
                    uni.showLoading({ title: "上传中" });
                    uni.uploadFile({
                        url: this.$HTTP + "common/upload",
                        filePath: res.tempFilePaths[0],
                        name: "file",
                        success: (uploadFileRes) => {
                            uni.hideLoading();
                            this.form.work_image = JSON.parse(
                                uploadFileRes.data
                            ).data.url;
                            console.log(this.form.work_image);
                        },
                    });
                },
            });
        },
        // 提交
        submit() {
            applyTechnician({
                ...this.form,
                dealer_id: uni.getStorageSync("dealer_id"),
            })
                .then((res) => {
                    uni.showToast({ title: "申请成功", icon: "none" });
                    uni.removeStorageSync("dealer_id");
                    uni.redirectTo({
                        url: "/subPages/technician/recruit/ToBeReviewed?type=home",
                    });
                })
                .catch((err) => {
                    uni.showToast({ title: err.msg, icon: "none" });
                });
        },
        // 日期选择
        bindDateChange(e) {
            this.date = e.detail.value;
            this.form.birthday = this.date;
        },
        // 获取城市
        getCityData() {
            getCity().then((res) => {
                this.array = res.data;
            });
        },
        // 选择城市
        bindPickerChange(e) {
            this.index = this.array[e.target.value].name;
            this.form.area_id = this.array[e.target.value].id;
        },
        // 返回
        close() {
            uni.navigateTo({ url: "/subPages/technician/tabBar/home" });
        },
    },
};
</script>
<style lang="scss" scoped>
.box {
    width: 100vw;
    min-height: 100vh;
    background: $theme-color;
    .topBg {
        height: 560rpx;
    }
    .content {
        width: 100vw;
    }
    .title {
        height: 90rpx;
        border-radius: 18rpx;
        position: relative;
        .img {
            height: 100%;
            width: calc(100% + 8rpx);
            position: relative;
            top: -4rpx;
            left: -4rpx;
        }
        .textImg {
            width: 150rpx;
            position: absolute;
            left: 15vw;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
        }
    }
    .forms {
        padding: 10rpx 30rpx;
        &-item {
            text-align: right;
            height: 100rpx;
            border-bottom: 1rpx solid #eaeaea;
            .label {
                font-weight: bold;
                word-break: keep-all;
            }
            .radio {
                &-group {
                    height: 60rpx;
                }
                &-item {
                    > text {
                        margin-right: 20rpx;
                    }
                }

                &-img {
                    margin-right: 10rpx;
                    width: 30rpx;
                    height: 30rpx;
                }
            }
        }
        &-item:last-child {
            border: none;
        }
    }
    .uploadBox {
        margin-top: 30rpx;
        box-sizing: border-box;
    }
    .upImg {
        padding: 30rpx;

        &-left {
            &-title {
                font-size: 30rpx;
                font-weight: bold;
            }
            &-tip {
                margin-top: 20rpx;
                font-size: 24rpx;
                color: #c5c5c5;
            }
        }
        &-right {
            &-box {
                width: 200rpx;
                height: 200rpx;
                border: 6rpx solid #f0f0f0;
                border-radius: 20rpx;
                color: #c5c5c5;
            }
            &-img {
                width: 200rpx;
                height: 200rpx;
                border: 6rpx solid #f0f0f0;
                border-radius: 20rpx;
            }
        }
    }
}
.card {
    width: 90%;
    background: #fff;
    border-radius: 20rpx;
    margin: 0 auto;
    border: 4rpx solid #000;
    box-sizing: border-box;
}
/deep/.input-placeholder,
.placeholder {
    color: #c5c5c5;
}
.rIcon {
    width: 11.51rpx;
    height: 19.95rpx;
    margin-left: 10rpx;
}
.addIcon {
    width: 51rpx;
    height: 50.86rpx;
    margin-bottom: 10rpx;
}
.top {
    position: fixed;
    width: 100%;
    top: 50rpx;
    left: 0;
    z-index: 10;
    .closeIcon {
        transform: rotate(45deg);
        width: 40rpx;
        height: 40rpx;
        margin-left: 50rpx;
    }
    &-title {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
    }
}
.btn {
    width: 90%;
    margin: 0 auto;
    padding: 20rpx 0 60rpx 0;
    img {
        width: 100%;
    }
}
</style>